<template>
  <el-row class="rowNavStyle">
    <el-col :span="24" class="colNavStyle">
      <menuButton
        @addButtonStyleKey="addClick"
        helper-path="pages/b6f39c"
      ></menuButton>
    </el-col>
  </el-row>
  <el-table
    :data="tableData"
    stripe
    :border="true"
    row-key="roleId"
    @selection-change="SelectionChange"
    default-expand-all
  >
    <el-table-column type="selection" width="55" />
    <!-- 动态列 -->
    <el-table-column
      show-overflow-tooltip
      v-for="itme in columns"
      :key="itme.fieldEnName"
      :prop="itme.fieldEnName"
      :label="itme.fieldCnName"
      :min-width="itme.fieldWidth"
      :sortable="itme.fieldSortable"
      :align="itme.fieldAlign"
    >
      <template v-if="itme.fieldSlot === 'isOpen'" #default="isOpen">
        <el-switch
          :before-change="switchClick"
          v-model="isOpen.row.isOpen"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="开启中"
          inactive-text="关闭中"
        />
      </template>
      <template v-else-if="itme.fieldSlot === 'icon'" #default="icon">
        <el-icon
          ><component class="icons" :is="icon.row.icon"></component
        ></el-icon>
      </template>
      <template v-else-if="itme.fieldSlot === 'isPlain'" #default="isPlain">
        <el-switch
          :before-change="switchClick"
          v-model="isPlain.row.isPlain"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="是"
          inactive-text="否"
        />
      </template>
      <template v-else-if="itme.fieldSlot === 'isRound'" #default="isRound">
        <el-switch
          :before-change="switchClick"
          v-model="isRound.row.isPlain"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="是"
          inactive-text="否"
        />
      </template>
      <template v-else-if="itme.fieldSlot === 'color'" #default="color">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div
            :style="{ backgroundColor: color.row.color }"
            style="
              width: 10px;
              height: 10px;
              margin-right: 5px;
              border-radius: 50%;
            "
          ></div>
          <span> {{ color.row.color }}</span>
        </div>
      </template>
      <template v-else-if="itme.fieldSlot === 'textColor'" #default="textColor">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div
            :style="{ backgroundColor: textColor.row.textColor }"
            style="
              width: 10px;
              height: 10px;
              margin-right: 5px;
              border-radius: 50%;
            "
          ></div>
          <span> {{ textColor.row.textColor }}</span>
        </div>
      </template>
      <template  v-else-if="itme.fieldSlot === 'yl'"  #default="yl">
        <buttonStyleLayout :modelData="yl.row"></buttonStyleLayout>
      </template>
      <template v-else-if="itme.fieldSlot === 'useCount'" #default="useCount">
        <el-button v-if="useCount.row.useCount > 0" type="success" circle>{{
          useCount.row.useCount
        }}</el-button>
        <el-button v-else type="info" circle>{{
          useCount.row.useCount
        }}</el-button>
      </template>
    </el-table-column>
    <!-- <el-table-column prop="buttonStyleName" label="样式名称" />
    <el-table-column prop="icon" label="按钮图标" align="center" width="100">
      <template #default="model">
        <el-icon
          ><component class="icons" :is="model.row.icon"></component
        ></el-icon>
      </template>
    </el-table-column>
    <el-table-column prop="isPlain" label="朴素按钮" align="center" width="100">
      <template #default="model">
        <el-switch
          :before-change="switchClick"
          v-model="model.row.isPlain"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="是"
          inactive-text="否"
        />
      </template>
    </el-table-column>
    <el-table-column prop="isRound" label="圆角按钮" align="center" width="100">
      <template #default="model">
        <el-switch
          :before-change="switchClick"
          v-model="model.row.isRound"
          class="ml-2"
          inline-prompt
          style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
          active-text="是"
          inactive-text="否"
        />
      </template>
    </el-table-column>
    <el-table-column prop="color" label="按钮颜色" align="center" width="100">
      <template #default="model">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div
            :style="{ backgroundColor: model.row.color }"
            style="
              width: 10px;
              height: 10px;
              margin-right: 5px;
              border-radius: 50%;
            "
          ></div>
          <span> {{ model.row.color }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="textColor"
      label="文字颜色"
      align="center"
      width="100"
    >
      <template #default="model">
        <div
          style="display: flex; justify-content: center; align-items: center"
        >
          <div
            :style="{ backgroundColor: model.row.textColor }"
            style="
              width: 10px;
              height: 10px;
              margin-right: 5px;
              border-radius: 50%;
            "
          ></div>
          <span> {{ model.row.textColor }}</span>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="size" label="按钮大小" align="center" width="100">
    </el-table-column>
    <el-table-column prop="yl" label="按钮预览">
      <template #default="model">
        <buttonStyleLayout :modelData="model.row"></buttonStyleLayout>
      </template>
    </el-table-column>
    <el-table-column
      prop="useCount"
      label="使用次数"
      width="100"
      align="center"
    >
      <template #default="model">
        <el-button v-if="model.row.useCount > 0" type="success" circle>{{
          model.row.useCount
        }}</el-button>
        <el-button v-else type="info" circle>{{
          model.row.useCount
        }}</el-button>
      </template>
    </el-table-column>
    <el-table-column
      prop="userName"
      label="创建用户"
      align="center"
      width="100"
    />
    <el-table-column
      prop="createTime"
      label="创建时间"
      align="center"
      width="150"
    /> -->
    <el-table-column label="操作" align="center" width="180">
      <template #default="scope">
        <dataRowButton
          :model="scope.row"
          @editButtonStyleKey="handleEdit(scope.row)"
          @delButtonStyleKey="handleDelete(scope.row)"
        ></dataRowButton>
      </template>
    </el-table-column>
  </el-table>
  <addOrEdit
    :isVisibles="isVisibles"
    :modelData="ruleForm"
    :dialogTitle="dialogTitle"
    @closeBnt="colosClick"
  ></addOrEdit>
</template>
    <script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import addOrEdit from "../buttonStyle/addOrEdit.vue";
import { ElMessage } from "element-plus";
import { deleteButtonStyle, getButtonStyleList } from "@/api/buttonStyle";
import {
  buttonStyle,
  SysButtonStyleOutPut,
} from "@/model/buttonStyle/buttonStyle";
import buttonStyleLayout from "@/components/buttonStyle.vue";
import menuButton from "@/components/menuButton.vue";
import dataRowButton from "@/components/dataRowButton.vue";
import { GetMenuColsByMenuId } from "@/api/publicTool";
//初始加载dom
onMounted(() => {
  GetMenuColsByMenuIdMsg();
});
//加载状态
const loading = ref(true);
//定义列
const columns = ref();
//table数据
const tableData = ref<SysButtonStyleOutPut[]>([]);
//控制弹出层显隐
const isVisibles = ref<boolean>(false);
//弹出层标题
const dialogTitle = ref<string>();
//公司模型数据
const ruleForm = reactive<buttonStyle>({
  buttonStyleId: "",
  buttonStyleName: "",
  size: "default",
  types: "primary",
  icon: "",
  color: "",
  isText: false,
  isRound: false,
  isCircle: false,
  isPlain: false,
  isLink: false,
  orderBy: 1,
  textColor: "",
});

// 选中项
const selectedRows = ref<SysButtonStyleOutPut[]>([]);
//菜单列
const GetMenuColsByMenuIdMsg = async () => {
  columns.value = await GetMenuColsByMenuId();
  if (columns.value.length > 1) {
    getButtonStyleListMsg();
  } else {
    columns.value = [];
  }
};
//获取table数据
const getButtonStyleListMsg = () => {
  getButtonStyleList()
    .then(({ data, code }) => {
      if (code === 200) {
        tableData.value = data;
      }
      loading.value = false;
    })
    .catch(() => {
      loading.value = false;
    });
};

//复选框事件
const SelectionChange = (val: SysButtonStyleOutPut[]) => {
  selectedRows.value = val;
};

//关闭弹出层
const colosClick = function () {
  getButtonStyleListMsg();
  isVisibles.value = false;
};

//编辑
const editClick = function () {
  if (selectedRows.value.length == 0) {
    ElMessage({
      message: "请选择一条数据进行编辑",
      type: "warning",
    });
  } else if (selectedRows.value.length > 1) {
    ElMessage({
      message: "只能选择一条数据进行编辑",
      type: "warning",
    });
  } else {
    addOrEditMethod(selectedRows.value[0], false);
  }
};
//行内编辑事件
const handleEdit = function (model: SysButtonStyleOutPut) {
  addOrEditMethod(model, false);
};

//行内删除事件
const handleDelete = function (model: SysButtonStyleOutPut) {
  deleteButtonStyle({ buttonStyleId: model.buttonStyleId }).then(
    ({ code, msg }) => {
      if (code == 200) {
        getButtonStyleListMsg();
        ElMessage({
          message: msg,
          type: "success",
        });
      }
    }
  );
};

//新增
const addClick = function () {
  const model = ref<SysButtonStyleOutPut[]>([]);
  addOrEditMethod(model.value[0], true);
};

//新增或编辑方法
const addOrEditMethod = function (model: SysButtonStyleOutPut, isAdd: boolean) {
  if (isAdd) {
    ruleForm.buttonStyleName = "";
    ruleForm.icon = "";
    ruleForm.size = "default";
    ruleForm.isPlain = false;
    ruleForm.isRound = false;
    ruleForm.color = "";
    ruleForm.textColor = "";
    ruleForm.buttonStyleId = "";
  } else {
    ruleForm.buttonStyleName = model.buttonStyleName;
    ruleForm.icon = model.icon;
    ruleForm.size = model.size;
    ruleForm.isPlain = model.isPlain;
    ruleForm.isRound = model.isRound;
    ruleForm.color = model.color;
    ruleForm.textColor = model.textColor;
    ruleForm.buttonStyleId = model.buttonStyleId;
  }
  dialogTitle.value = isAdd ? "新增按钮样式" : "编辑按钮样式";
  isVisibles.value = true;
};
//禁止点页面的滑块
const switchClick = function () {
  return new Promise((_, reject) => {
    return reject(new Error("Error"));
  });
};
</script>
    <style scoped>
.rowStyle {
  border: 1px solid #00152914;
  box-shadow: 0 1px 4px #00152914;
  margin-bottom: 3px;
}
.colStyle {
  height: 50px;
  display: flex;
  justify-content: left;
  align-items: center;
  padding-left: 5px;
}
</style>